<template>
  <div class="breadcrumb-nav">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item
        v-for="item in processedItems"
        :key="item.title"
        :to="item.path"
      >
        {{ item.title }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

const props = defineProps({
  items: {
    type: Array,
    required: true,
    default: () => [],
  },
});

// 智能处理面包屑路径
const processedItems = computed(() => {
  return props.items.map((item, index) => {
    // 如果是最后一项，不需要path
    if (index === props.items.length - 1) {
      return { ...item, path: null };
    }

    // 如果有from参数，添加到路径中
    if (route.query.from && item.path) {
      return {
        ...item,
        path: {
          path: item.path,
          query: { from: route.query.from },
        },
      };
    }

    return item;
  });
});
</script>

<style lang="scss" scoped>
.breadcrumb-nav {
  @apply mb-4;

  :deep(.el-breadcrumb__inner) {
    @apply text-gray-600 dark:text-gray-400 transition-colors duration-200;

    &.is-link:hover {
      @apply text-primary-500 dark:text-primary-400;
    }
  }

  :deep(.el-breadcrumb__separator) {
    @apply text-gray-400 dark:text-gray-500;
  }

  :deep(.el-breadcrumb__item:last-child) {
    .el-breadcrumb__inner {
      @apply text-gray-900 dark:text-white font-medium;
    }
  }
}
</style>
